import React from 'react';

import { prefix } from '../../config';
import { getPrefixCls, isString } from '../../utils';
import { SvgAdd, SvgCopy, SvgDelete } from '../Svg';

import type { ActionType, ActionTypes } from '../type';

export interface ActionProps {
  action: ActionTypes;
  onAdd?: () => void;
  onRemove?: () => void;
  onCopy?: () => void;
}
const cellPrefixCls = getPrefixCls(prefix.editableTable, 'cell');

function Action(props: ActionProps) {
  const { action } = props;
  // 表格操作
  const tableAction: ActionType[] = [];
  if (!action) {
    tableAction.push('add', 'remove', 'copy');
  } else {
    isString(action)
      ? tableAction.push(action as ActionType)
      : tableAction.push(...action);
  }
  return (
    <div className={`${cellPrefixCls}__action`}>
      {tableAction.includes('add') && (
        <div className={`${cellPrefixCls}__action--icon`}>
          <SvgAdd onClick={props.onAdd}></SvgAdd>
        </div>
      )}
      {tableAction.includes('remove') && (
        <div className={`${cellPrefixCls}__action--icon`}>
          <SvgDelete onClick={props.onRemove}></SvgDelete>
        </div>
      )}
      {tableAction.includes('copy') && (
        <div className={`${cellPrefixCls}__action--icon`}>
          <SvgCopy onClick={props.onCopy}></SvgCopy>
        </div>
      )}
    </div>
  );
}

export default Action;
